<template>
    <div class="utask-wrap" style="margin-top:10px;">
        <ul class="utask-list">
            <li class="utask-li" v-for="item in task">
                <div class="utask-item">
                    <div class="utask-left">
                        {{item.name}}
                    </div>
                    <div class="utask-right">
                        <p class="utask-title">{{item.rewardDesc}}</p>
                        <p class="utask-desc">{{item.taskDesc}}</p>
                        <p class="utask-tip1">本任务自领取开始计算任务时间，中途不可更换其它任务</p>
                    </div>
                </div>
                <div class="utask-btn" @click="startTask(item.id)" v-if="!item.status">
                    领取
                </div>
                <div class="utask-ing" v-if="item.status == 2">
                    <div class="utask-ing-inner">
                        <div class="utask-ing-left">
                            <h2>已完成</h2>
                            <p>结束时间：{{item.endTime}}</p>
                        </div>
                        <div class="utask-ing-right utask-finish-right">

                        </div>
                    </div>
                    <div class="utask-progress">
                        <yd-progressbar type="line" :progress="item.progress" trail-width="4" trail-color="#1a9aff"></yd-progressbar>
                        <p class="utask-progress-desc">{{item.descs[0]}} {{item.descs[1]}}</p>
                    </div>
                    <div class="utask-person-wrap">
                        <ul>
                            <li class="utask-person utask-person-act" v-for="v1 in item.values[2]"></li>
                            <li class="utask-person" v-for="v2 in item.values[3]"></li>
                        </ul>
                        <p>{{item.descs[2]}} {{item.descs[3]}}</p>
                    </div>
                </div>
                <div class="utask-ing" v-if="item.status == 3">
                    <div class="utask-ing-inner">
                        <div class="utask-ing-left">
                            <h2>未完成</h2>
                            <p>结束时间：{{item.endTime}}</p>
                        </div>
                        <div class="utask-ing-right utask-ufini-right">

                        </div>
                    </div>
                    <div class="utask-progress">
                        <yd-progressbar type="line" :progress="item.progress" trail-width="4" trail-color="#1a9aff"></yd-progressbar>
                        <p class="utask-progress-desc">{{item.descs[0]}} {{item.descs[1]}}</p>
                    </div>
                    <div class="utask-person-wrap">
                        <ul>
                            <li class="utask-person utask-person-act" v-for="v1 in item.values[2]"></li>
                            <li class="utask-person" v-for="v2 in item.values[3]"></li>
                        </ul>
                        <p>{{item.descs[2]}} {{item.descs[3]}}</p>
                    </div>
                </div>
                <div class="utask-btn" v-if="item.status == 3" @click="startTask(item.id)">
                    再次领取
                </div>
                <div class="utask-ing" v-if="item.status == 1">
                    <div class="utask-ing-inner">
                        <div class="utask-ing-left">
                            <h2>进行中</h2>
                            <p>结束时间：{{item.endTime}}</p>
                        </div>
                        <div class="utask-ing-right">

                        </div>
                    </div>
                    <div class="utask-progress">
                        <yd-progressbar type="line" :progress="item.progress" trail-width="4" trail-color="#1a9aff"></yd-progressbar>
                        <p class="utask-progress-desc">{{item.descs[0]}} {{item.descs[1]}}</p>
                    </div>
                    <div class="utask-person-wrap">
                        <ul>
                            <li class="utask-person utask-person-act" v-for="v1 in item.values[2]"></li>
                            <li class="utask-person" v-for="v2 in item.values[3]"></li>
                        </ul>
                        <p>{{item.descs[2]}} {{item.descs[3]}}</p>
                    </div>
                </div>
            </li>
        </ul>
         <div class="utask-empty" v-if="task.length==0">
            
        </div>
        <yd-popup v-model="showExchange" position="center" width="90%" :close-on-masker="false">
            <div class="exchange-wrap">
                <h2>兑换</h2>
                <yd-cell-group>
                    <yd-cell-item>
                        <span slot="left">兑换</span>
                        <yd-input slot="right" type="number" v-model="exchangeValue"  placeholder="输入金额"></yd-input>
                    </yd-cell-item>
                </yd-cell-group>
                <div class="exchange-value">
                    <p class="p1">最大兑换额度：{{userInfo.credit || 0}}</p>
                    <p class="p2" @click="exchangeAll">全部兑换</p>
                </div>
                <div class="exchange-btn-wrap">
                    <div class="exchange-btn exchange-btn-left">
                        <yd-button size="large" type="hollow" @click.native="cancleExchange">取消</yd-button>
                    </div>
                    <div class="exchange-btn exchange-btn-right">
                        <yd-button size="large" type="hollow" @click.native="doExchange">确定</yd-button>
                    </div>
                </div>
            </div>
        </yd-popup>
    </div>
</template>

<script>
let axios = require("axios");
export default {
    data() {
        return {
            result: {},
            task: [],
            userInfo: {},
            showExchange: false,
            exchangeValue: ''
        };
    },
    filters:{
        cash:function(value){
            value +='';
            return value.replace(/(?!^)(?=(\d{3})+$)/g, ',')
        }
    },
    created() {

    },
    mounted(){
        this.initPage();
    },
    methods: {
        exchange(){
            this.showExchange = true;
        },
        cancleExchange(){
            this.showExchange = false;
        },
        goHistory(){
            let query = this.$route.query;
            this.$router.push('/utaskhistory?u='+query.u)
        },
        doExchange(){
            let value = this.exchangeValue;
            if(value){
                if(value > this.userInfo.credit){
                    this.$dialog.toast({
                        mes: '可兑换额度不足',
                        timeout: 1500
                    });
                } else {
                        let me = this;
                        let query = this.$route.query;
                        let token = query.u || '';
                        axios({
                            method: "get",
                            url: "/api/task/exchange",
                            params: {
                                token: token,
                                amount: value
                            }
                        }).then(function(res) {
                            let data = res.data;
                            if(data.errno == 200){
                                me.initPage();
                                me.$dialog.toast({
                                    mes: '兑换成功',
                                    timeout: 1500
                                });
                                // self.initPage();
                            } else {
                                me.$dialog.toast({
                                    mes: data.msg,
                                    timeout: 1500
                                });
                            }
                        });
                }
            } else{
                this.$dialog.toast({
                    mes: '请输入兑换金额',
                    timeout: 1500
                });
            }
        },
        exchangeAll(){
            this.exchangeValue = this.userInfo.credit;
        },
        initPage(){
            let self = this;
            let query = this.$route.query;
            let token = query.u || '';
            let values = [];
            axios({
                method: "get",
                url: "/api/task/history",
                params: {
                token: token
                }
            }).then(function(res) {
                let data = res.data;
                if(data.errno == 200){
                    // self.result = data.data;
                    self.task = data.data;
                    self.task.map(function(item){
                        if(item.progress){
                            for(let k in item.progress){
                                values.push(item.progress[k]);
                                values.push(item.condition[k]);
                            }
                            item.values = values;
                            item.progress = values[0]/values[1];
                            item.descs = item.progressDesc.split(' ');
                        }
                        return item;
                    });
                    // self.initPage();
                }
            });
            axios({
                method: "get",
                url: "/api/user/info",
                params: {
                token: token
                }
            }).then(function(res) {
                let data = res.data;
                if(data.errno == 200){
                    self.userInfo = data.data;
                    // self.initPage();
                }
            });
        },
        startTask: function(id){
            let me = this;
            let query = this.$route.query;
            let token = query.u || '';
            axios({
                method: "get",
                url: "/api/task/claim",
                params: {
                    token: token,
                    taskId: id
                }
            }).then(function(res) {
                let data = res.data;
                if(data.errno == 200){
                    me.initPage();
                    me.$dialog.toast({
                        mes: '认领成功',
                        timeout: 1500
                    });
                    // self.initPage();
                } else{
                    me.$dialog.toast({
                        mes: data.msg,
                        timeout: 1500
                    });
                }
            });
        }
    
    }
};
</script>

<style>
    .exchange-wrap{
        padding-top: 15px;
        background-color: #fff;
        border-radius: 10px;
    }
    .exchange-btn-wrap{
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top: 1px solid #ededed;
        margin-top: 30px;
    }
    .exchange-btn{
        width: 49%;
        display: inline-block;
        box-sizing: border-box;
    }
    .exchange-btn-left{
        border-right: 1px solid #ededed;
    }
    .exchange-btn-right .yd-btn-hollow{
        color: #1a9aff;
    }
    .exchange-btn .yd-btn-block{
        border: none;
        border-radius: 0;
        margin-top: 0;
    }
    .exchange-wrap .exchange-value{
        overflow: hidden;
        padding: 0 20px;
    }
    .exchange-value .p1{
        font-size: 15px;
        color: #4c4c4c;
        float: left;
    }
    .exchange-value .p2{
        font-size: 15px;
        color: #1a9aff;
        float: right;
    }
    .exchange-wrap .yd-cell{
        margin: 20px 40px;
    }
    .exchange-wrap .yd-cell::after{
        display: none;
    }
    .exchange-wrap .yd-cell-left{
        font-size: 24px;
        color: #1a1a1a;
        padding-right: 20px;
    }
    .utask-wrap .exchange-wrap .yd-input input[type=number]{
        font-size: 32px!important;
        color: #1a1a1a;
    }
    .exchange-wrap h2{
        height: 30px;
        font-size: 17px;
        color: #1a1a1a;
        text-align: center;
    }
    .utask-wrap{
        background-color: #f5f5f5;
    }
    .utask-top{
        height: 146px;
        background-color: #fff;
        text-align: center;
        padding-top: 40px;
        box-sizing: border-box;
        border-bottom: 1px solid #ededed;
    }
    .utask-total{
        display: inline-block;
        position: relative;
        font-size: 32px;
        color:#433400;
        font-weight: bold;
    }
    .utask-total:after{
        content: '';
        position: absolute;
        width: 30px;
        height: 30px;
        right: -40px;
        top: 0px;
        background: url(http://img.uuuda.com/wxapp/udou.png) no-repeat center center;
        background-size: contain;
    }
    .utask-tip{
        font-size: 14px;
        color: #666;
        text-align: center;
    }
    .utask-exchange{
        background-color: #fff;
        height: 50px;
    }
    .utask-exchange p{
        float: left;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        color: #666;
        padding-left:10px;
        font-weight: bold;
        position: relative;
    }
    .utask-exchange p a{
        color: #1a1a1a;
    }
    .utask-exchange p a span{
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(http://img.uuuda.com/wxapp/utask/uqu.png) no-repeat center center;
        background-size: contain;
        margin: 0 10px;
        position: relative; 
        top: 4px;
    }
    .utask-exchange .utask-exhcange-btn{
        float: right;
        color: #1a9aff;
        font-size: 14px;
        padding: 3px 10px;
        border: 1px solid #1a9aff;
        border-radius: 5px;
        margin: 10px;
    }
    .utask-center{
        overflow: hidden;
        padding-right: 20px;
        margin-right: 10px;
        background: url(http://img.uuuda.com/wxapp/utask/arrright.png) no-repeat right center;
        background-size: 20px 20px;
    }
    .utask-center p{
        font-size: 17px;
        color: #1a1a1a;
        padding: 10px;
        float: left;
        font-weight: bold;
    }
    .utask-center div{
        font-size: 16px;
        float: right;
        color: #1a1a1a;
        padding: 10px;
    }
    .utask-list{
        margin: 0px 10px 20px;
    }
    .utask-li{
        margin-bottom: 20px;
    }
    .utask-list .utask-item{
        background-color: #fff;
        display: flex;
        padding: 20px;
    }
    .utask-item .utask-left{
        width:90px;
        text-align: center;
        color: #1a1a1a;
        font-size: 12px;
        margin-top: 10px;
        padding-top: 60px;
        background: url(http://img.uuuda.com/wxapp/utask/utask.png) no-repeat center top;
        background-size: contain;
    }
    .utask-item .utask-right{
        padding-left: 20px;
    }
    .utask-item .utask-title{
        font-size: 16px;
        color: #1a1a1a;
        line-height: 30px;
    }
    .utask-item .utask-desc{
        font-size: 13px;
        color: #666;
        line-height: 20px;
    }
    .utask-item .utask-tip1{
        font-size: 11px;
        color: #999;
        line-height: 13px;
        margin-top: 5px;
    }
    .utask-btn{
        border-top: 1px solid #ededed;
        height: 45px;
        font-size: 15px;
        color: #1a9aff;
        line-height: 45px;
        text-align: center;
        background-color: #fff;
    }
    .utask-ing-inner{
        background-color: #fff;
        border-top: 1px solid #ededed;
        position: relative;
        padding: 20px;
    }
    .utask-ing-left h2{
        font-size: 15px;
        color: #1a1a1a;
    }  
    .utask-ing-left p{
        font-size: 11px;
        color: #666;
        line-height: 30px;
    }
    .utask-ing-right{
        width: 60px;
        height: 60px;
        position: absolute;
        background: url(http://img.uuuda.com/wxapp/utask/ing.png) no-repeat center center;
        background-size: contain;
        right: 20px;
        top: 20px;
    }
    .utask-finish-right{
        background: url(http://img.uuuda.com/wxapp/utask/ufini.png) no-repeat center center;
        background-size: contain;
    }
    .utask-ufini-right{
        background: url(http://img.uuuda.com/wxapp/utask/unfinish.png) no-repeat center center;
        background-size: contain;
    }
    .utask-progress{
        display: flex;
        background-color: #fff;
        padding: 0 20px;
    }
    .utask-progress-desc{
        width: 200px;
        margin-left: 20px;
        font-size: 14px;
        color: #1a1a1a;
    }
    .yd-progressbar>svg{
        border-radius: 4px;
    }
    .utask-person{
        width: 20px;
        height: 20px;
        background: url(http://img.uuuda.com/wxapp/utask/pgray.png) no-repeat center center;
        background-size: contain;
        margin-right: 10px;
    }
    .utask-person-wrap{
        background-color: #fff;
        padding: 20px;
        display: flex;
    }
    .utask-person-act{
        background: url(http://img.uuuda.com/wxapp/utask/pblue.png) no-repeat center center;
        background-size: contain;
    }
    .utask-empty{
        width: 100%;
        height: 500px;
         background: url(http://img.uuuda.com/wxapp/utask/unone.png) no-repeat center center;
        background-size: 200px;
    }
</style>
